<template>
	<view>
		<mescroll-uni :ref="'mescrollRef'+tabIndex" @init="mescrollInit"   @down="downCallback" @up="upCallback">
		<!-- 数据列表 -->
		<view class="u-padding-left-32 u-padding-right-32">
			<view class="u-margin-top-20" v-for="(item,index) in dataList" :key="index">
				<list-item :item="item" :isShare="false" :isTag="false" :showTime="false" :showStar="false">
					<view slot="content">
						<view class="u-font-24 content-desc-item u-margin-top-10">
							<flex-text width="96" txt="退还人" size="24"></flex-text>：{{item.nickname || ''}}
						</view>
						<view class="u-font-24 content-desc-item u-margin-top-10 u-flex u-col-top">
							<text style="line-height: 30rpx;">
								退还原因：
							</text>
							<view class="u-flex-1 u-position-relative">
								<view class="line-height u-line-3"  :class="{'show-all':item.showMore}">
									{{getContentHeight(item,index)}}
								</view>
								
								<view class="line-height hide-content-box" style="opacity: 0;" :class="{'hide-content':item.hasOwnProperty('hasMore')}" :id="'txt-content'+index">
									<!-- 实际高度 -->
									{{item.content}}
								</view>
								<view class="u-flex showAll-box" v-if="!item.showMore&&item.hasMore" @click="toggleItem(item)">
									<view class="u-margin-left-30 text-color-txtTheme">
										<!-- <text class="u-margin-right-20">...</text> -->
										<text class="u-margin-right-5">展开</text>
										<u-icon name="arrow-down" size="14" color="#765CFE"></u-icon>
									</view>
								</view>
								<view class="u-text-right text-color-txtTheme" v-if="item.showMore" @click="toggleItem(item)">
									<text class="u-margin-right-5">收起</text>
									<u-icon name="arrow-up" size="14" color="#765CFE"></u-icon>
								</view>
							</view>
						</view>
						<view class="u-font-24 content-desc-item u-margin-top-10">退还时间：{{item.createTime | timeFormat}}</view>
						<view class="u-font-24 text-color-txtTheme u-margin-top-10" @click="logistics(item)"><text>查看物流</text><u-icon name="arrow-right"></u-icon></view>
						<view class="u-flex u-flex-wrap">
							<view v-for="(img,i) in item.image" :key="i" class="u-padding-right-6 u-margin-top-12" @click="preview(img,item.image)">
								<item-image  :img="img" :width="122" :height="122" />
							</view>
						</view>
					</view>
					<view slot="footer"></view>
					<view slot="end">
						<view class="u-flex u-row-between u-margin-top-20" v-if="loginForm.userType==='issue'&&item.isAdopt==-1"> 
							<view>
								<item-btn  type="plain" @click="commit(item,0)" :loading="commitFlag" width="290" height="64">
									<text class="content-desc-item u-font-24">不采纳</text>
								</item-btn>
							</view>
							<view>
								<item-btn @click="commit(item,1)" :loading="commitFlag" width="290" height="64">
									<text class="text-white u-font-24">采纳</text>
								</item-btn>
							</view>
						</view>
						<view class="u-flex u-margin-top-20 u-margin-bottom-20 u-row-right" 
							v-if="item.creatorId==loginForm.uid&&loginForm.userType!=='issue' || item.isAdopt!=-1">
							<text class="u-margin-right-12 u-font-24 content-desc-item text-bold">{{item.statusName}}</text>
							<u-icon :name="item.statusIcon" :color="currentThemeObj.primary" size="37" v-if="item.isAdopt!=-1"></u-icon>
						</view>
						<!-- <view class="u-font-24 content-desc-item u-margin-top-10 u-flex u-row-right" v-if="item.rejectReason">
							<view>
								<text class="text-color-txtTheme line-height">驳回理由：</text>{{item.rejectReason}}
							</view>
						</view> -->
					</view>
				</list-item>
			</view>
		</view>
		</mescroll-uni>
</view>

</template>

<script>
	import upCallback from '@/mixins/upCallbackMixin.js'
	import data from '@/data/index.js'
	import {customRequest,add,deleteIds,getDetail,update } from '@/api/crud.js'
	import empty from '@/components/mescroll-uni/components/mescroll-empty.vue'
	export default {
		components: {
			empty
		},
		mixins: [upCallback], 
		props:{
			tab:{
				type:Object,
				default:()=>({})
			},
			tabIndex:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
				apiModule:'shopApi',
				apiType:'experienceProductReturn',
				name:"thirdQuery",
				dataList:[],
				commitFlag:false,
				form:{}

			}
		},
		created () {
			this.form=this.tab;
		},
		methods: {
			// 组装显示文字和图标 isAdopt:-1 没选择状态 0 不采纳 1采纳
			dataListCallBack(){
				this.dataList = this.dataList.map(val=>{
					if(typeof val.image==='string') val.image = val.image ? val.image.split(',') : [];
					val.statusName = ['审核中','不采纳','采纳'][val.isAdopt+1];
					this.$set(val,'showMore',false);
					val.statusIcon = ['close-circle-fill','close-circle-fill','checkmark-circle-fill'][val.isAdopt+1];
					return val
				})
			},
			// 提交采纳  传id，状态，体验本id
			commit(item,flag){
				const obj = {
					id:item.id,
					isAdopt:flag,
					cartInfoId:item.cartInfoId,
					experienceProductId:item.experienceProductId
				}
				// if(flag==2) obj.rejectReason = '驳回申请'
				this.verify(obj)
			},
			//调用退还接口
			verify(form){
				this.commitFlag = true;
				update(form,this.apiType,this.apiModule,'').then(res=>{
					this.$u.toast('审核成功')
					this.commitFlag = false;
					this.downCallback()
				}).catch(()=>{
					this.commitFlag = false;
				})
			},
			preview(current,urls){
				this.previewUrls(urls,current)
			},
			//查看物流
			logistics(item){
			this.$emit('logistics',item)
			},
			// 展开收起
			toggleItem(item){
				item.showMore = !item.showMore
			},
			//获取content高度判断是否显示展开
			getContentHeight(item,index){
				if(!item.hasOwnProperty("hasMore")){
					this.$nextTick(()=>{
						let query = uni.createSelectorQuery().in(this);
						// 获取所有文本在html中的高度
						query.select(`#txt-content${index}`).boundingClientRect(data => {
						  // this.textHeight = data.height
							if(data){
								const pxToRpx = uni.upx2px(30*3)
								this.$set(item,'hasMore',data.height>=pxToRpx)
							}
						}).exec();
					})
				}
				return item.content
			}
		},
		filters:{
			afterType(val){
				const obj = data.afterTypeList.find(item=>item.value==val);
				if(!obj) return false;
				return obj.label
			}
		}
	}
</script>

<style lang="scss" scoped>
	.right-content{
		flex-direction: column;
		display: flex;
		height: 166rpx;
		margin-left: 24rpx;
	}
	.line-height{
		width: 100%;
		position: relative;
		line-height: 30rpx;
	}
	.showAll-box{
		position:absolute;
		bottom: 0;
		right: 0;
		height: 30rpx;
		background: #fff;
		box-shadow: -9px 0px 6px 0 #fff;
		border-radius: 30%;
	}
	.show-all.u-line-3{
		display:block
	}
	.hide-content{
		display: none;
	}
	.hide-content-box{
		position: absolute;
		right:9999;
	}
</style>

 